<script setup>
import {ref,onMounted} from "vue"
import axios from "axios"
import {ElMessage} from "element-plus"

let tableData = ref([])

const GetData = () => {
  axios
    .get("http://127.0.0.1:8000/shop/product/")
    .then((res) => {
      tableData.value = res.data
    })
    .catch((err) => {
      ElMessage({
        message: err,
        type: "error",
      })
    })
}

const Buy = (row) => {
  console.log(row.id)
  axios.post(`http://127.0.0.1:8000/shop/shopping/${row.id}/add/`, row)
  .then((res) => {
    console.log(res)

})


}


onMounted(() => {
  GetData()
})
</script>
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column label="操作" >
        <template #default="scope">
            <router-link :to="`/show/${scope.row.id}`">详情</router-link> 
            <el-button type="primary" @click="Buy(scope.row)">购买</el-button>
        </template>
    </el-table-column>
  </el-table>
<router-link to="/buy">购物车</router-link>
</template>
<style scoped>
</style>